<template>
  <main class="main">
    <div class="aside">
      <nav-bar></nav-bar>
    </div> 
    <div class="dashboard">
      <transition name="fade" mode="out-in">
        <router-view name="dashboard"></router-view>
      </transition>
    </div>
  </main>
</template>

<script>
import NavBar from './NavBar/NavBar'

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    NavBar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .main
    display: flex
    overflow: hidden
    .aside
      flex: 1
      overflow: hidden
    .dashboard
      flex: 10
      vertical-align: top
      min-height: 650px
      width: 100%
</style>
